<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令</title>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
		<style type="text/css">
			table,
			th {
				border: 1px solid #000000;
				border-collapse: collapse;
				width: 400px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 迭代列表 -->
			<ul>
				<li v-for="city in cities">
					{{city}}
				</li>
			</ul>

			<!-- 迭代表格数据 -->
			<table>
				<tr v-for="(city,idx) in cities">
					<th>{{idx+1}}</th>
					<th>{{city}}</th>
				</tr>
			</table>

			<!-- 下拉菜单的迭代 -->
			<select>
				<option v-for="(city,idx) in cities" :value="idx">{{city}}</option>
			</select>
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data() {
					return {
						cities: ["苏州", "无锡", "杭州", "上海"]
					}
				}
			});
		</script>
	</body>
</html>
